<template>
  <view class="container">
		<!-- 输入职位名称 -->
		<view class="input-section">
		  <text class="input-label">职位名称</text>
		  <text class="input-note">不能填写QQ、微信、电话等联系方式，以及特殊符号</text>
		  <view class="input-text">
			  <input
				v-model="jobTitle"
				placeholder="输入职位名称"
				maxlength="20"
				class="input"
			  />
			  <text class="input-counter">{{ jobTitle.length }}/20</text>
		  </view>
		</view>
		

		<!-- 分类选择 -->
		<view class="category-section">
		  <view class="category-title">
			  <text
				v-for="(path, index) in selectedCategoryPath"
				:key="index"
				class="path-item"
				@click="handlePathClick(index)">
				{{ path }}  > 
			  </text>
			  <text>{{ categoryTitle }}</text>
			  
			</view>
		  <view class="category-list">
				<view
				  v-for="(category, index) in currentCategories"
				  :key="index"
				  class="category-item"
				  @click="handleCategoryClick(category)">
					<text>{{ category.name }}</text>
				</view>
		  </view>
		</view>
			
		  <!-- 二级分类 -->
		  <!-- <view v-if="selectedCategory" class="category-list">
			<view
			  v-for="(subCategory, index) in selectedCategory.children"
			  :key="index"
			  class="category-item"
			  @click="selectSubCategory(subCategory)"
			>
			  <text>{{ subCategory.name }}</text>
			</view>
		  </view> -->

		  <!-- 三级分类 -->
		 <!-- <view v-if="selectedSubCategory" class="category-list">
        <view
          v-for="(subSubCategory, index) in selectedSubCategory.children"
          :key="index"
          class="category-item"
          @click="selectJobTitle(subSubCategory.name)"
        >
          <text>{{ subSubCategory.name }}</text>
        </view>
      </view> -->
   

		<!-- 下一步按钮 -->
		<button class="next-button" @click="handleNextStep">下一步</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      jobTitle: '', // 用户输入的职位名称
      categories: [
        {
          name: '互联网/AI',
          children: [
            {
              name: '前端开发',
              children: [
                { name: '前端开发工程师' },
                { name: 'Web前端开发' },
              ],
            },
            {
              name: '后端开发',
              children: [
                { name: 'Java开发工程师' },
                { name: 'Python开发工程师' },
              ],
            },
          ],
        },
        {
          name: '电子/电气/通讯',
          children: [
            {
              name: '硬件开发',
              children: [
                { name: '硬件工程师' },
                { name: '嵌入式开发工程师' },
              ],
            },
          ],
        },
        {
          name: '产品',
          children: [
            {
              name: '产品经理',
              children: [
                { name: '产品经理' },
                { name: '高级产品经理' },
              ],
            },
          ],
        },
        {
          name: '客服/运营',
          children: [
            {
              name: '客服',
              children: [
                { name: '客服专员' },
                { name: '客服经理' },
              ],
            },
          ],
        },
        {
          name: '销售',
          children: [
            {
              name: '销售经理',
              children: [
                { name: '销售经理' },
                { name: '销售总监' },
              ],
            },
          ],
        },
        {
          name: '人力/行政/法务',
          children: [
            {
              name: '人力资源',
              children: [
                { name: 'HRBP' },
                { name: '招聘专员' },
              ],
            },
          ],
        },
      ], // 分类数据
	  currentCategories: [], // 当前显示的分类列表
	  categoryTitle: '请选择一级分类', // 分类标题
	  selectedCategoryPath: [], // 已选中的分类路径
    };
  },
  created() {
      // 初始化显示一级分类
      this.currentCategories = this.categories;
	   this.updateCategoryTitle();
    },
  methods: {
	   // 处理路径点击
	    handlePathClick(index) {
	      // 根据点击的路径索引，回退到对应的分类层级
	      this.selectedCategoryPath = this.selectedCategoryPath.slice(0, index ); // 更新路径
	      this.currentCategories = this.getCategoriesByPath(this.selectedCategoryPath); // 更新当前分类列表
	      this.updateCategoryTitle(); // 更新标题
	    },
		 // 根据路径获取对应的分类列表
		  getCategoriesByPath(path) {
		    let categories = this.categories;
		    for (const name of path) {
		      const category = categories.find((c) => c.name === name);
		      if (category && category.children) {
		        categories = category.children;
		      } else {
		        break;
		      }
		    }
		    return categories;
		  },
		
		  // 更新分类标题
		  updateCategoryTitle() {
		    if (this.selectedCategoryPath.length === 0) {
		      this.categoryTitle = '请选择一级分类';
		    } else {
		     const hasChildren = this.currentCategories[0] && this.currentCategories[0].children;
		     this.categoryTitle = `请选择${hasChildren ? '二级' : '三级'}分类`;
		    }
		  },
	// 处理分类点击
	    handleCategoryClick(category) {
	      if (category.children) {
	        // 如果有子分类，更新当前分类列表和标题
	        this.selectedCategoryPath.push(category.name); // 记录选中的分类路径
	        this.currentCategories = category.children; // 更新当前分类列表
	        this.updateCategoryTitle(); // 更新标题
	      } else {
	        // 如果没有子分类，表示选中了三级分类
	        this.jobTitle = category.name; // 将选中的分类名称赋值给 jobTitle
	      }
	    },

    // 处理下一步按钮点击
    handleNextStep() {
      if (!this.jobTitle) {
        uni.showToast({
          title: '请填写或选择职位名称',
          icon: 'none',
        });
        return;
      }

     // 获取上一个页面实例
           const pages = getCurrentPages();
           const prevPage = pages[pages.length - 2]; // 上一个页面实例
     
           // 将选中的职位名称传递回上一个页面
           if (prevPage && prevPage.$vm) {
             prevPage.$vm.jobTitle = this.jobTitle; // 更新上一个页面的 jobTitle
           }
     
           // 返回上一个页面
           uni.navigateBack();
    },
  },
};
</script>

<style>
.container {
  padding: 20px;
}

.input-section {
  margin-bottom: 20px;
}

.input-label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

.input-text{
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 50px;
		margin-bottom: 20px; /* 行与行之间的间距 */
		border-bottom: 1px solid #ccc;
}

.input {
  width: 100%;
  height: 22px;
  font-size: 14px;
}

.input-counter {
  font-size: 12px;
  color: #999;
  display: block;
  text-align: right;
  margin-top: 5px;
}

.input-note {
  font-size: 12px;
  color: #999;
  display: block;
  margin-bottom: 20px;
}

.category-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.path-item {
  color: #007aff; /* 蓝色，表示可点击 */
  cursor: pointer;
  margin-right: 5px;
}

.path-item:hover {
  text-decoration: underline; /* 鼠标悬停时显示下划线 */
}

.category-section {
  margin-bottom: 20px;
}

.category-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 10px;
}

.category-list {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.category-item {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border-bottom: 1px solid #ccc;
  text-align: left;
  cursor: pointer;
  display: block;
  
  color: var(--Neutral-10, #1D2129);
  font-family: "PingFang SC";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px; 
}

.category-item:hover {
  background-color: #f0f0f0;
}

.next-button {
  width: 100%;
  height: 40px;
  background: linear-gradient(90deg, #9A9AFF 0%, #D6D6FE 100%);
  color: #ffffff;
  border-radius: 32px;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
</style>